<template>
    <div class="log-container auto-height-container">
      <vab-query-form>
        <vab-query-form-left-panel :span="24">
          <el-form :inline="true" :model="queryForm">
            <el-form-item style="margin-right: 10px !important;">
              <el-select v-model="queryForm.method" placeholder="请选择请求方法" clearable filterable>
                <el-option label="GET" value="GET" />
                <el-option label="POST" value="POST" />
                <el-option label="PUT" value="PUT" />
                <el-option label="DELETE" value="DELETE" />
              </el-select>
            </el-form-item>
            <el-form-item style="margin-right: 10px !important;">
              <el-date-picker
                v-model="dateRange"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD HH:mm:ss"
                :default-time="[
                  new Date(2000, 1, 1, 0, 0, 0),
                  new Date(2000, 1, 1, 23, 59, 59),
                ]"
                :shortcuts="dateShortcuts"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="fetchData">查询</el-button>
              <el-button @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </vab-query-form-left-panel>
      </vab-query-form>
  
      <el-table v-loading="loading" :data="list" border height="100%">
        <el-table-column prop="log_id" label="ID" width="80" align="center" show-overflow-tooltip />
        <el-table-column prop="url" label="请求URL" min-width="200" align="center" show-overflow-tooltip />
        <el-table-column prop="method" label="请求方法" width="100" align="center" show-overflow-tooltip>
          <template #default="{ row }">
            <el-tag :type="getMethodTagType(row.method)">{{ row.method }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="ip" label="IP地址" min-width="120" align="center" show-overflow-tooltip />
        <el-table-column prop="browser" label="浏览器" min-width="120" align="center" show-overflow-tooltip />
        <el-table-column prop="os" label="操作系统" min-width="120" align="center" show-overflow-tooltip />
        <el-table-column prop="code" label="状态码" width="100" align="center" show-overflow-tooltip>
          <template #default="{ row }">
            <el-tag :type="row.code === 200 ? 'success' : 'danger'">{{ row.code }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="cost_time" label="执行时间" width="100" align="center" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.cost_time }}ms
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" min-width="160" align="center" show-overflow-tooltip />
        <el-table-column label="操作" width="100" align="center" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleDetail(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <vab-pagination
        v-model:current-page="queryForm.pageNo"
        v-model:page-size="queryForm.pageSize"
        :total="total"
        @current-change="fetchData"
        @size-change="fetchData"
      />
  
      <!-- 使用日志详情组件 -->
      <log-detail
        v-model:visible="dialogVisible"
        :current-log="currentLog"
      />
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, reactive, watch, onMounted } from 'vue'
  import { getLogList, getLogDetail } from '/@/api/log'
  import LogDetail from './components/LogDetail.vue'
  import {
    type QueryForm,
    type LogInfo,
    type LogDetail as LogDetailType,
    type RequestMethod,
    type TagType,
    methodTagMap,
    dateShortcuts
  } from './types'
  
  const loading = ref(false)
  const list = ref<LogInfo[]>([])
  const total = ref(0)
  const dialogVisible = ref(false)
  const currentLog = ref<LogDetailType | null>(null)
  const dateRange = ref<[string, string] | undefined>()
  
  const queryForm = reactive<QueryForm>({
    pageNo: 1,
    pageSize: 10,
    method: '',
    dateRange: []
  })
  
  // 监听日期范围变化
  watch(dateRange, (val) => {
    queryForm.dateRange = val ? [...val] : []
  })
  
  // 获取日志列表
  const fetchData = async () => {
    try {
      loading.value = true
      const { data } = await getLogList(queryForm)
      list.value = data.list
      total.value = data.total
    } catch (error) {
      console.error('获取日志列表失败:', error)
    } finally {
      loading.value = false
    }
  }
  
  // 重置查询
  const resetQuery = () => {
    queryForm.method = ''
    dateRange.value = undefined
    queryForm.dateRange = []
    fetchData()
  }
  
  // 获取请求方法对应的标签类型
  const getMethodTagType = (method?: string): TagType => {
    return method ? methodTagMap[method.toUpperCase() as RequestMethod] ?? 'info' : 'info'
  }
  
  // 查看详情
  const handleDetail = async (row: LogInfo) => {
    try {
      const { data } = await getLogDetail(row.log_id)
      currentLog.value = data
      dialogVisible.value = true
    } catch (error) {
      console.error('获取日志详情失败:', error)
    }
  }
  
  onMounted(() => {
    fetchData()
  })
  </script>
  
  <style lang="scss" scoped>
  :deep(.el-date-editor) {
    width: 380px;
  }
  </style>